<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <style>
        .btn{
            display: inline-block;
            padding: 10px 20px;
            font-size: 16px;
            background-color: #409EFF;
            color: white;
            cursor: pointer;
            user-select: none;
            border-radius: 6px;
            box-shadow: 0 0 2px #81baf3;
        }
        .btn:active{
            background-color:#1d8cfb;
        }
        .card{
            display: inline-block;
            width: 400px;
            min-height: 300px;
            box-shadow: 0 0 8px #ccc;
            border-radius: 8px;
        }
        .card>.head{
            padding: 16px 20px;
            border-bottom: 1px solid #ccc;
            font-size: 18px;
        }
        .card>.body{
            padding: 16px 20px;
            font-size: 16px;
        }
    </style>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
            分发的概念：是在子组件标签调用时，通过模板代码传递的方式，为子组件提供页面标签结构的技术
                        ==> 在组件封装开发时，会存在一部分页面内容无法确定，只有当该组件被调用时才可以明确定义的内容
                            基于这种需求，vue构建了组件分发技术  
            
            分发标签 slot : 该标签为一个组件构建时的占位标签，在组件被调用时，将组件标签的内容替换到占位标签中
         -->
        <p>默认分发</p>
        <my-btn>登录</my-btn>
        <my-btn>注册</my-btn>
        <my-btn>添加</my-btn>
        <my-btn>
            <i class="iconfont icon-edit"></i>
            <span>编辑</span>
        </my-btn>
        <!-- 上述分发均为默认分发，等同于如下写法 -->
        <my-btn>
            <template v-slot:default>
                <i class="iconfont icon-edit"></i>
                <span>编辑</span>
            </template>
        </my-btn>
        <hr>
        <p>具名分发</p>
        <!-- vue2.5 之后该方式被废弃 -->
        <!-- <my-card>
            <span slot="head">标题</span>
            <span>内容</span>
        </my-card> -->
        <br><br>
        <!-- vue2.5 之后使用新指令 v-slot:插槽名 进行分发定义 -->
        <my-card>
            <template v-slot:head>
               <span>标题</span>
            </template>
            <span>内容</span>
        </my-card>
    </div>


    <script type="text/x-template" id="my-button">
        <div class="btn">
            <!-- <slot></slot> -->
            <!-- 上述slot定义等同如下定义 -->
            <slot name="default"></slot>
        </div>
    </script>

    <script type="text/x-template" id="my-card">
        <div class="card">
            <div class="head">
                <slot name="head"></slot>
            </div>
            <div class="body">
                <slot></slot>
            </div>
        </div>
    </script>

    <script>
        Vue.component("MyBtn", {
            template:"#my-button"
        })
        Vue.component("MyCard", {
            template:"#my-card"
        })

        new Vue({
            el:"#app"
            
        })
    </script>
</body>
</html>